<template>
	<view v-if="type==1" :class="{'mb80':last}">
		<view v-for="(co,i) in dList" :key="i" class='conw2 f-row p2'>
			<view @click='goodinfo' class="f-g-0 bf6 left bs5 p-r">
				<mg-img cname='wh' :src='co.icon' />
				<view v-if='outin==1?co.outStock<=0:co.inStock<=0' class="p-a ysq f-c b0 cf w100 f26">已售罄</view>
			</view>
			<view class="f-g-1 right ml20 f24 c9">
				<view class="f30 t-o-e c0">{{co.name}}</view>
				<view class="mt10">
					<bk-b c-name='f22 bf7 cb mr10 p-3-10' t='含茶'></bk-b>
					<bk-b c-name='f22 bf7 cb mr10 p-3-10' t='含乳制品'></bk-b>
				</view>
				<view class="mt10 t-o-e2 f20">{{'防疫期间，为减少接触，如有不便请您谅解。'||co.body}}</view>
				<view v-if="orderset.sales==1&&co.salesNum>0" class="mt10 f-raw">
					<text class="mr30">销量 {{co.salesNum}}</text>
				</view>
				<view v-if="vipPrice(co)" class="mt10 f-row">
					<view class="vipl f-y-c">
						<!-- <image class="vimg" mode="aspectFit" src="/static/gvip.png"></image> -->
						<view>{{sl+vipPrice(co)}}</view>
					</view>
					<view class="vipr f-y-c">VIP</view>
				</view>
				<add-goods :isunit='isunit(co)' :isyprice='isyprice(co)' :outin='outin' @add='add($event,co)' @dec='dec($event,co)'
				 :co='co' cname="mt10" pcname='f36 c3'></add-goods>
				<view v-if="co.maxNum>0||co.minNum>1">
					<text v-if="co.minNum>1" class="crb mr20">{{co.minNum}}份起售</text>
					<text v-if="co.maxNum>0" class="crb">限{{co.maxNum}}份</text>
				</view>
			</view>
		</view>
	</view>
	<scroll-view class="ws-n mb10" scroll-x v-else-if="type==2">
		<view v-for="(co,i) in dList" :key="i" class='dis-in conw mr20 bs15'>
			<view @click='goodinfo' class='goodsimg'>
				<mg-img cname='wh' :src='co.icon' />
			</view>
			<view class='conwb'>
				<view class='t-o-e f26'>{{co.name}}</view>
				<add-goods :outin='outin' @add='add($event,co)' @dec='dec($event,co)' :co='co' pcname='f26'></add-goods>
			</view>
		</view>
	</scroll-view>
	<!-- 商品详情 -->
	<!-- <view v-else-if="type==3" class='p3 bf'>
		<view class="f-x-bt">
			<view class='t-o-e c0 f34 wei'>{{co.name}}</view>
			<view class='c9 f24'>
				<text v-if="orderset.sales==1&&co.salesNum>0">销量{{co.salesNum}}</text>
				<text class='ml20'>库存{{co.outStock}}</text>
			</view>
		</view>
		<view class='c9 f24 mb10'>{{co.body}}</view>
		<view v-if="vipPrice" class="mt10 f-row">
			<view class="vipl f-y-c">
				<view>{{sl+vipPrice}}</view>
			</view>
			<view class="vipr f-y-c">VIP</view>
		</view>
		<add-goods :isunit='isunit(co)' :isyprice='isyprice(co)' :outin='outin' @add='add' @dec='dec' :co='co' cname="mt10" pcname='f44'></add-goods>
		<view class="f24" v-if="co.maxNum>0||co.minNum>1">
			<text v-if="co.minNum>1" class="crb mr20">{{co.minNum}}份起售</text>
			<text v-if="co.maxNum>0" class="crb">限{{co.maxNum}}份</text>
		</view>
	</view> -->
	<!-- 弹窗购物车 -->
	<!-- <mg-cell last="1" v-else-if="type==4" w='104' h='104' :img='co.icon' brs='5rpx' cname='p30 la124'>
		<template slot='bd'>
			<view class="f-bt">
				<view class="t-o-e">{{co.name}}</view>
				<view class="f-g-0 f32" :style="{color:tColor}">{{sl+itemTotal(co.price,co.num)}}</view>
			</view>
			<view class="f-bt mt10">
				<view class="f-g-1 f24 c9 f-y-c">
					<text class="ml10" v-if="co.isSpec==1">{{co.data}}</text>
					<text v-if="co.attribute">({{co.attribute}})</text>
					<text class="ml10" v-if="co.jldata">+{{co.jldata}}</text>
				</view>
				<add-goods v-if="showadd" addwz='2' :isprice="0" :showspec='false' @add='add' @dec='dec' :co='co' cname="f-g-0 mt10"></add-goods>
				<view v-else class="c9">x{{co.num}}</view>
			</view>
		</template>
	</mg-cell> -->
	<!-- 购物车 -->
	<!-- <mg-cell v-else-if="type==6" w='160' h='160' :img='co.icon' brs='5rpx' cname='f-sh' hdc='f-s'>
		<view slot='bd' class="h100 f-y-bt">
			<view class="f-bt">
				<view class="t-o-e f32 c0">{{co.name}}</view>
			</view>
			<view class="f-bt mt10">
				<view class="f-g-1 f24 c9 f-y-c">
					<text class="ml10" v-if="co.isSpec==1">{{co.data}}</text>
					<text v-if="co.attribute">({{co.attribute}})</text>
					<text class="ml10" v-if="co.jldata">+{{co.jldata}}</text>
				</view>
			</view>
			<view class="f-x-bt mt10">
				<view class="f-g-0" :style="{color:tColor}">{{sl}}<text class="f36 wei">{{itemTotal(co.price,co.num)}}</text></view>
				<add-goods v-if="showadd" addwz='2' :isprice="0" :showspec='false' @add='add' @dec='dec' :co='co' cname="f-g-0 mt10"></add-goods>
				<view v-else class="c9">x{{co.num}}</view>
			</view>
		</view>
	</mg-cell> -->
	<!-- <view v-else class='conw2 f-row p2'>
		<view class="f-g-0 left bf6">
		</view>
		<view class="f-g-1 right ml20 f22 c9">
			<view class="be p20"></view>
			<view class="mt20 be p15 w80"></view>
			<view class='mt20 f-x-bt'>
				<view class='be p20 w50'></view>
				<view class="f-g-0 f-bt">
					<button class="cartadd be"></button>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import addGoods from '@/components/goods/add-goods.vue'
	import bkB from '@/components/common/block-b.vue'
	import MgCell from '@/components/common/mg-cell.vue'
	export default {
		name: 'goods',
		components: {
			addGoods,
			bkB,
			MgCell,
		},
		props: {
			dList: {
				type: Array,
				default: function() {
					return []
				}
			},
			type: { //样式类型1列表2推荐3商品详情
				type: String,
				default: '1'
			},
			showbody: {
				type: Boolean,
				default: true
			},
			showadd: {
				type: Boolean,
				default: true
			},
			addtype: { //加类型1本地2数据库
				type: String,
				default: '1'
			},
			outin: {
				type: String,
				default: '1'
			},
			color: {
				type: String,
				default: ''
			},
			last: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {}
		},
		computed: {
			...mapState({
				orderset: state => state.config.orderset,
			}),
		},
		// watch: {
		// 	dList: {
		// 		handler(newv) {
		// 			console.log(newv)
		// 		},
		// 		immediate:true
		// 	}
		// },
		methods: {
			dec(e, co) {
				if (this.addtype == 1) {
					this.$emit('dec', co)
				} else {
					this.$emit('dec', {
						addwz: e.addwz,
						g: co
					})
				}
				// console.log('goods,dec', this.addtype, e, co)
			},
			add(e, co) {
				if (this.addtype == 1) {
					this.$emit('add', {
						g: co,
						// e: e.e,
					})
				} else {
					this.$emit('add', {
						addwz: e.addwz,
						g: co,
						// e: e.e,
					})
				}
				// console.log('goods,add', this.addtype, e, co)
			},
			goodinfo() {
				if (this.addtype == 1) {
					this.go({
						t: 1,
						url: '/yb_o2o/shop/goods-dl?id=' + this.co.id + '&gid=' + this.co.goodsId + '&page=shopGoods'
					})
				}
			},
			itemTotal(m, n) {
				return (m * n).toFixed(2)
			},
			isunit(co) {
				return this.orderset.unit == 1 && co.unit ? true : false
			},
			isyprice(co) {
				return this.orderset.price == 1 && co.outPrice ? true : false
			},
			vipPrice(co) {
				return (this.outin == 1 ? co.outVipPrice > 0 ? co.outVipPrice : '' :
					co.inVipPrice > 0 ? co.inVipPrice : '')
			},
		},
		async created() {},
	}
</script>

<style scoped lang="scss">
	.conw {
		width: 210rpx;

		.goodsimg {
			width: 210rpx;
			height: 210rpx;
		}

		.conwb {
			padding: 10rpx 2rpx 0;
		}
	}

	.conw2 {
		.left {
			width: 138rpx;
			height: 138rpx;
		}
	}

	.mb80 {
		padding-bottom: 100rpx;
	}

	.ysq {
		height: 50rpx;
		background: rgba($color: #000000, $alpha: 0.5);
	}

	// .vipl {
	// 	color: #F5ECB3;
	// 	font-size: 20rpx;
	// 	padding: 7rpx 10rpx;
	// 	border-radius: 5rpx 0 0 5rpx;
	// 	background: linear-gradient(to right, #69625B, #252002);

	// 	.vimg {
	// 		width: 28rpx;
	// 		height: 19rpx;
	// 		margin-right: 5rpx;
	// 		margin-top: -2rpx;
	// 	}
	// }
</style>
